<template>
  <my-nav-bar title="设置">
    <van-row type="flex" justify="center">
      <van-col class="head_photo" span="6">
        <van-uploader :after-read="afterRead">
          <van-image
            round
            width="2rem"
            height="2rem"
            :src="userPhoto"
          />
          <div class="head_photo_info">修改头像</div>
        </van-uploader>
      </van-col>
    </van-row>

    <van-row>
      <van-cell-group>
        <van-cell title="昵称" :value="nickName" is-link
                  :to="{name: 'setting_modify', params: {name: 'nickName', default: nickName}}"/>
        <van-cell title="电话" :value="userPhone" is-link
                  :to="{name: 'setting_modify', params: {name: 'userPhone', default: userPhone}}"/>
      </van-cell-group>
    </van-row>


    <div style="margin: 16px">
      <van-button round block type="info" @click="loginOut">退出</van-button>
    </div>
  </my-nav-bar>
</template>

<script>
import MyNavBar from "../../../components/MyNavBar";
import {Row, Col} from "vant";
import {Button, Cell, CellGroup} from "vant";
import {Popup, Picker} from "vant";
import {Image as VanImage} from "vant";
import {Uploader, Toast} from "vant";
import {changeAvatar} from "@/api/user";

export default {
  name: "Setting",
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Uploader.name]: Uploader,
    VanImage,
    Toast,
    MyNavBar
  },
  data() {
    return {
      userPhoto: this.$store.state.user.userInfo.avatarUrl,
      nickName: this.$store.state.user.userInfo.nickName,
      userPhone: this.$store.state.user.userInfo.phone,
      showPicker: false,
    }
  },
  methods: {
    // 头像上传
    afterRead(file) {
      this.$upload(file.file, "用户头像").then(res => {
        const {url} = res.data
        this.userPhoto = process.env.VUE_APP_IMG_URL +  url;
        changeAvatar({avatarUrl: this.userPhoto})
          .then(() => {
            return this.$store.dispatch("user/getInfo");
          })
          .then(res => {
            Toast.success("修改成功");
          })
          .catch(err => {
          Toast.fail("修改失败");
        })
      })
    },
    loginOut() {
      this.$store.dispatch("user/logout").then(res => {
        this.$router.replace("/main/personal");
        Toast.success("退出成功");
      })
    }
  }
}
</script>

<style scoped>
.head_photo {
  font-size: 14px;
  text-align: center;
  margin: 20px 0px;
}
</style>
